<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></script>
<title>js-2dmath: Polygon</title>

<script src="../dist/js-2dmath-browser.min.js" type="text/javascript" ></script>
<!--
<script src="../debug/js-2dmath-browser-debug.js" type="text/javascript" ></script>
-->

</head>
<body>
<h1>js-2dmath: Polygon</h1>
<canvas id="canvas" width="680" height="680" style="border: 1px solid red;"></canvas>
<p>Press keys (1-7) to run tests</p>
<ul>
    <li>1 - boxes collide</li>
    <li>2 - boxes collide</li>
    <li>3 - circles-polygon collide</li>
    <li>4 - boxes no collide</li>
    <li>5 - boxes no collide</li>
    <li>6 - circles-polygon no collide</li>
    <li>7 - triangles collide</li>
</ul>
</body>
</html>

<script>
//
// --- INIT ---
//
//expose js-2dmath globally, I'm lazy!
require("js-2dmath").globalize(window);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//
// code
//

var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
    poly2 = Polygon.create([5, 5], [50, 0], [50, 50], [0, 50]);
    poly3 = [];

function gjk(poly1, poly2) {
    Draw.polygon(ctx, poly1, "red");
    Draw.polygon(ctx, poly2, "blue");

    var result,
        history = [];
    result = Collision.GJK.getPolygonPolygon(poly1, poly2, history);
    console.log("GJK", JSON.stringify(result));

    Draw.text(ctx, result.overlap ? "collide" : "no collision", [-320, 200])

    Draw.polygon(ctx, result.simplex, "rgba(0,255,0, 0.25)", true);
    Draw.polygon(ctx, result.simplex, "rgba(0,255,0, 0.5)");


    Draw.polygon(ctx,
        Polygon.MinkowskiDifference(poly1, poly2),
        "rgba(0,0,255, 0.10)", true);


    // EPA!
    if (result.overlap) {
        var epa = Collision.Response.create();
        Collision.EPA(epa, poly1, poly2, result.simplex);
        console.log("EPA", JSON.stringify(epa));

        var ec = Collision.Manifold.EdgeClipping(poly1, poly2, epa.mtv);
        console.log("EC", JSON.stringify(ec));

        if (ec) {
            ec.cp && ec.cp.forEach(function(cp) {
                Draw.vec2(ctx, cp.p, "green", 5);
            });
            Draw.polygon(ctx, [ec.incidentEdge.v1, ec.incidentEdge.v2], "yellow");
            Draw.polygon(ctx, [ec.referenceEdge.v1, ec.referenceEdge.v2], "yellow");
        }
    }

}

function example1 () {
    var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
        poly2 = [];

    Polygon.translate(poly2, poly1, [15, 15]);

    gjk(poly1, poly2);
}

function example2 () {
    var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
        poly2 = [];
    var mat23 = Matrix23.create();

    Matrix23.translate(mat23, mat23, [25, 15]);
    Matrix23.rotate(mat23, mat23, Math.HALF_PI * 0.5);

    Polygon.transform(poly2, poly1, mat23);

    console.log(poly2);

    gjk(poly1, poly2);
}

function example3 () {
    var poly1 = Polygon.fromCircle(Circle.create(0, 0, 50), 10, 0),
        poly2 = [];


    console.log(poly1);

    Draw.polygon(ctx, poly1, "red");

    var mat23 = Matrix23.create();

    Matrix23.translate(mat23, mat23, [25, 25]);

    Polygon.transform(poly2, poly1, mat23);

    console.log(poly2);

    gjk(poly1, poly2);
}

function example4 () {
    var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
        poly2 = [];

    Polygon.translate(poly2, poly1, [75, 75]);

    gjk(poly1, poly2);
}

function example5 () {
    var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
        poly2 = [];
    var mat23 = Matrix23.create();

    Matrix23.translate(mat23, mat23, [75, 75]);
    Matrix23.rotate(mat23, mat23, Math.HALF_PI * 0.5);

    Polygon.transform(poly2, poly1, mat23);

    console.log(poly2);

    gjk(poly1, poly2);
}

function example6 () {
    var poly1 = Polygon.fromCircle(Circle.create(0, 0, 50), 10, 0),
        poly2 = [];


    console.log(poly1);

    Draw.polygon(ctx, poly1, "red");

    var mat23 = Matrix23.create();

    Matrix23.translate(mat23, mat23, [75, 75]);

    Polygon.transform(poly2, poly1, mat23);

    console.log(poly2);

    gjk(poly1, poly2);
}


function example7 () {
    var poly1 = Polygon.create([100, 0], [0, 100], [0, -100]),
        poly2 = Polygon.create([0, 0], [100, 100], [100, -100]);

    gjk(poly1, poly2);
}

/*
function example2() {
    var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
        poly2 = Polygon.create();

    Polygon.translate(poly2, poly1, [75, 100]);
    gjk(poly1, poly2);
}

function example3() {
    var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
        poly2 = Polygon.create([25, 25], [60, 25], [50, 50], [25, 50]);

    gjk(poly1, poly2);
}
function example4() {
    var poly1 = Polygon.create([50, -40], [0, -80], [-50, -40]),
        poly2 = Polygon.create([50, -40], [0, -80], [-50, -40]);

    Polygon.translate(poly2, poly1, [10, 10]);
    Polygon.rotate(poly2, poly2, Math.DEG_TO_RAD * 15);
    gjk(poly1, poly2);
}
*/

var current_test = example4;

function onKeyDown(ev) {
    if (!ev) {
        ev = event;
    }

    switch (ev.keyCode) {
    case 49: // '1'
    case 50: // '2'
    case 51: // '3'
    case 52: // '4'
    case 53: // '5'
    case 54: // '6'
    case 55: // '7'
    //case 56: // '8'
    //case 57: // '9'
        current_test = window["example" + (ev.keyCode - 48)]
        if (!current_test) {
            current_test = example1;
        }

        window.requestAnimFrame(update);
        break;
    }

}
document.addEventListener("keydown", onKeyDown, false);

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // center
    ctx.save();

    Draw.invertAxis(canvas, ctx); // y-up
    ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
    Draw.cartesianAxis(ctx, 320, 16); // coordinates


    current_test();

    ctx.restore();

}
update();

</script>


